<template>
    <section style="padding: 24px; background:#fff;">
        <div class="table-operator">
            <!-- 网站分类 -->
            <a-button type="primary"
                      icon="plus"
                      @click="handleAdd">新增</a-button>
            <a-input-search placeholder="关键字"
                            style="width: 250px; margin-left:10px"
                            enter-button
                            @search="onSearch"
                            v-model="keyword" />
            <a-input-search placeholder="关键字"
                            style="width: 250px; margin-left:10px"
                            enter-button
                            @search="onSearch"
                            v-model="title" />
            <a-button @click="searchReset">重置</a-button>
        </div>
        <a-table ref="table"
                 bordered
                 :loading='loading'
                 :columns="columns"
                 rowKey="id"
                 :data-source="tbList"
                 :pagination="ipagination"
                 @change="handleTableChange">
            <span slot="action"
                  slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm cancelText='取消'
                              okText='确定'
                              title="确定删除吗?"
                              @confirm="() => handleDelete(record.id)"
                              placement="topLeft">
                    <a style="color:red">删除</a>
                </a-popconfirm>
            </span>
        </a-table>
        <add-website-category ref="addwebsitecategory"
                              @ok="getData"></add-website-category>
    </section>

</template>
<script>
import { websiteCategoryList, deleteWebsiteCategory } from '@/api/api'
import AddWebsiteCategory from './modules/AddWebsiteCategory.vue';
const columns = [
    {
        title: '分类名称',
        dataIndex: 'name',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '分类描述',
        dataIndex: 'description',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'edit',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 130
    }
];
export default {
    components: { AddWebsiteCategory },
    data() {
        return {
            selectedRowKeys: [],
            loading: false,
            tbList: [],
            columns,
            keyword: '',
            title: '',
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        }
    },
    methods: {
        getData(arg) {
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            this.loading = true;
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;

            let categoryId = '';
            let title = '';
            websiteCategoryList(pageNo, pageSize, categoryId, title).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.ipagination.total = res.data.total ? res.data.total : 0;
                    this.tbList = res.data.list;
                }
            })
        },
        handleAdd() {
            this.$refs.addwebsitecategory.add();
            this.$refs.addwebsitecategory.title = "添加分类";
        },
        handleEdit(recode) {
            this.$refs.addwebsitecategory.edit(recode);
            this.$refs.addwebsitecategory.title = "编辑分类";
        },
        handleDelete(record) {
            deleteWebsiteCategory(record).then(res => {
                if (res.code == 200) {
                    this.$message.success("删除成功!");
                    this.getData();
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        onSearch() {
            this.getData(1);
        },
        searchReset() {
            this.keyword = '';
            this.getData(1);
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        handleTableChange(pagination, filters, sorter) {
            this.ipagination = pagination;
            this.getData();
        },
    },
    mounted() {
        this.getData();
    },
}
</script>